<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>消息代理平台Message Agent</title>

<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet" />

<link href="css/animate.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />

<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>


<script src="js/plugins/dataTables/datatables.min.js"></script>




<script th:inline="javascript">
	
	$(document).ready(function() {

		/* Init DataTables */
		var oTable = $('#editable').DataTable({
			"aaSorting" : [ [ 7, "desc" ] ]
		});
		$("#topicselect").change(function(e){
			changeClick();
		})
	});

	function changeClick(){
		var option = '';
		var topicid = $("#topicselect").val();
		if(topicid==""){
			option = '<option value=''>--请选择--</option>';
			$("#queueselect").html(option);
			return;
		}
		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "http://localhost:8080/mqrest/getQueueByTopic",
			data : {topicid:topicid},
			success : function(data) {
				for(var i in data){
					option += '<option value="'+data[i].id+'">'+data[i].queuename+'</option>';
				}
				if(data.length==0){
					option = '<option value=''>--请选择--</option>';
				}
				$("#queueselect").html(option);
			}
		});
	}
	function addConnectInfo() {
		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "http://localhost:8080/mqrest/addConnectInfo",
			data : $('#connectinfo').serialize(),
			success : function(data) {
				if (data.result == "success") {
					window.location.href = "/mqrest/connectInfo";
				} else {
					alert(data.message);
				}
			}
		});
	}

	function generateSecret() {
		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "http://localhost:8080/mqrest/generateSHA",
			data : $('#secretid').serialize(),
			success : function(data) {
				if (data.result == "success") {
					window.location.href = "/mqrest/connectInfo";
				} else {
					alert(data.message);
				}
			}
		});
	}
	function editConnectInfo(obj) {
		document.getElementById("editid").value=obj.name;
		var option = "";
		$.ajax({
					type : 'POST',
					dataType : "json",
					url : "http://localhost:8080/mqrest/getConnectInfoById",
					data : {
						id : obj.name
					},
					success : function(data) {
						$("#"+data.configid+"").attr("selected","selected");
						$("#"+data.queueid+"").attr("selected","selected");
					}
				});
	}

	function editconfirm() {
		var id = document.getElementById("editid").value;
		var queueid = document.getElementById("queueid").value;
		var configid = document.getElementById("configid").value;

		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "http://localhost:8080/mqrest/editConnectInfo",
			data : {
				id : id,
				queueid : queueid,
				configid : configid
			},
			success : function(data) {
				if (data.result == "success") {
					window.location.href = "/mqrest/connectInfo";
				} else {
					alert(data.message);
				}
			}
		});
	}
</script>
</head>

<body>
	<div id="wrapper">
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav metismenu" id="side-menu">
					<li class="active"><a href="#"><i class="fa fa-table"></i>
							<span class="nav-label">消息平台代理</span><span class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li class="active"><a href="/mqrest/connectInfo">申请信息</a></li>
							<li class="active"><a href="/mqrest/getTopicInformation">主题信息</a></li>
							<li class="active"><a href="/mqrest/getQueueInformation">队列信息</a></li>
							<li class="active"><a href="/mqrest/getSysInformation">系统信息</a></li>
							<li class="active"><a href="/mqrest/getConfigInformation">回调配置</a></li>
						</ul></li>

				</ul>

			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom"></div>
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>消息代理平台---用户申请信息</h2>
					<ol class="breadcrumb">
						<li><a href="index.html">主页</a></li>
						<li><a>消息平台代理</a></li>
						<li class="active"><strong>申请信息</strong></li>
					</ol>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
							<!-- 	<h5>Editable Table in- combination with jEditable</h5> -->
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<i class="fa fa-wrench"></i>
									</a>
									<ul class="dropdown-menu dropdown-user">
										<li><a href="#">Config option 1</a></li>
										<li><a href="#">Config option 2</a></li>
									</ul>
									<a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">
								<div>
									<a data-toggle="modal" class="btn btn-primary"
										href="#modal-form">添加申请</a> <a data-toggle="modal"
										class="btn btn-primary" href="#secret-form">生成密钥</a> <span
										th:text="${secret}"></span>
								</div>
								<div id="modal-form" class="modal fade"
									aria-labelledby="connectInfo" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-hidden="true">&times;</button>
												<h4 class="modal-title" id="connectInfo">添加用户申请</h4>
											</div>
											<div class="modal-body">
												<!-- 添加信息start -->
												<form id="connectinfo" action="/mqrest/addConnectInfo"
													name="connectinfo" method="post">
													<label class=" control-label">申请人</label> <input
														type="text" id="ssss" name="applyperson"
														class="form-control" /> <label class=" control-label">联系方式</label>
													<input type="text" name="contactinfo" class="form-control" />
													<label class=" control-label">系统名称</label> <select
														class="form-control" name="sysid">
														<option value="">--请选择--</option>
														<option th:each="system : ${systems}"
															th:value="${system.id}" th:text="${system.sysname}"></option>
													</select> 
													<label class=" control-label">主题编码</label> <select
														class="form-control" id="topicselect">
														<option value="">--请选择--</option>
														<option th:each="topic : ${topics}"
															th:value="${topic.id}"
															th:text="${topic.topicname}"></option>
													</select> 
													<label
														class=" control-label">监听队列</label>  <select
														class="form-control" id="queueselect" name="queueid">
														<option value="">--请选择--</option>
													</select> 
													<label class=" control-label">关联配置</label>
														<select
														class="form-control" name="configid">
														<option value="">--请选择--</option>
														<option th:each="config : ${configs}"
															th:value="${config.id}"
															th:text="${config.configname}"></option>
													</select> 
												</form>
												<!-- 添加信息stop -->
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭</button>
												<button type="button" class="btn btn-primary"
													onclick="addConnectInfo()">提交更改</button>
											</div>
										</div>
									</div>
								</div>

								<!-- 生成密钥 -->
								<div id="secret-form" class="modal fade"
									aria-labelledby="secretInfo" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-hidden="true">&times;</button>
												<h4 class="modal-title" id="secretId">密钥信息</h4>
											</div>
											<div class="modal-body">
												<form id="secretid" action="/mqrest/generateSHA"
													name="secretid" method="post">
													<label class=" control-label">用户名</label> <input
														type="text" id="ssss" name="username" class="form-control" />
													<label class=" control-label">密码</label> <input type="text"
														name="password" class="form-control" /> <label
														class=" control-label">系统编码</label> <input type="text"
														name="syscode" class="form-control" /> <label
														class=" control-label">队列名称</label> <input type="text"
														name="queuename" class="form-control" /> <label
														class=" control-label">transitionId</label> <input
														type="text" name="transitionId" class="form-control" />
												</form>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭</button>
												<button type="button" class="btn btn-primary"
													onclick="generateSecret()">Generate</button>
											</div>
										</div>
									</div>
								</div>
								<!-- 生成密钥 -->
								<table class="table table-striped table-bordered table-hover "
									id="editable">

									<thead>
										<tr>
											<th>系统名称</th>
											<th>系统编码</th>
											<th>申请人</th>
											<th>联系方式</th>
											<th>队列名称</th>
											<th>回调名称</th>
											<!--<th>回调参数</th> -->
											<!-- 	<th>密钥</th> -->
											<!-- <th>更新时间</th>-->
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr class="gradeA" th:each="connectinfor : ${connectInfors}">
											<td th:text="${connectinfor.sysname}">无</td>
											<td th:text="${connectinfor.syscode}">无</td>
											<td th:text="${connectinfor.applyperson}">无</td>
											<td th:text="${connectinfor.contactinfo}">无</td>
											<td th:text="${connectinfor.queuename}"></td>
											<td th:text="${connectinfor.configname}"></td>
											<!-- <td th:text="${connectinfor.callbackparam}"></td> -->
											<!-- 	<td th:text="${connectinfor.secret}"></td> -->
											<!-- 	<td width="15%" th:text="${connectinfor.updatetime}" ></td>-->
											<td th:switch="${connectinfor.state}"><b> <span
													th:case="1">已开启</span> <span th:case="0">未开启</span>
											</b></td>
											<td th:switch="${connectinfor.state}"><a role="button"
												class="btn btn-default btn-sm" th:case="0"
												th:href="@{/startOrStopConsume(id=${connectinfor.id})}">开启</a>

												<a role="button" class="btn btn-primary btn-sm" th:case="1"
												th:href="@{/startOrStopConsume(id=${connectinfor.id})}">关闭</a>
												<a role="button" class="btn btn-primary btn-sm"
												data-toggle="modal" th:onclick="'editConnectInfo(this)'"
												data-target="#myModal" th:name="${connectinfor.id}">更改</a></td>
										</tr>
									</tbody>
								</table>
								<!-- 模态框（Modal）start -->
								<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
									aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-hidden="true">&times;</button>
												<h4 class="modal-title" id="myModalLabel">修改申请信息</h4>
											</div>
											<div class="modal-body">
												<label class="control-label">监听队列</label> 
												 <select class="form-control" id="queueid" name="queueid">
												 	<option th:each="queue : ${queues}" th:id="${queue.id}" th:text="${queue.queuename}" th:value="${queue.id}" />
												</select>
												<label class="control-label">回调地址</label>
												<select class="form-control" id="configid"  name="configid">
													<option th:each="config : ${configs}" th:id="${config.id}" th:text="${config.configname}" th:value="${config.id}" />
												</select>
												<input type="hidden"  id="editid" class="form-control" />
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭</button>
												<button type="button" onclick="editconfirm()"
													class="btn btn-primary">提交更改</button>
											</div>
										</div>
										<!-- /.modal-content -->
									</div>
									<!-- /.modal -->
								</div>
								<!-- 模态框（Modal）stop -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>

</html>
